html{
    overflow: hidden;
}
body{
    margin: 0vw;
    /* 实现兼容PC端强行访问移动网站的空白区域的样式区分 */
    background-color: #666;
    color: #333;
}
.app{
    /* 实现兼容PC端强行访问移动网站的样式-需要提供媒体查询的其它样式完成 */
    /* max-width: 640px;
    margin: 0 auto; */
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
}

/* 导航样式 start */
.search-box{
    height: 14vw;
    box-shadow: 0px 0px 2px #999;
    font-size: 0px;
    padding: 3vw 3vw;
    box-sizing: border-box;
    /* position: relative; */
    /* 粘性定位 */
    position: sticky;
    top: 0px;
    background-color: white;
}
.search-box > input[type="text"]{
    width: 100%;
    height: 100%;
    border: unset;
    outline: none;
    background-color: #efefef;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 0px 2vw;
    /* 文字也可以随着屏幕大小一起变化 最小值12px */
    font-size: 3.6vw;
    color: #333;
}
.search-box .search-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 5vw;
    pointer-events: none;
}
.search-box > input[type="text"]:hover + .search-bg{
    display: none;
}
/* 导航样式 end */

/* home 页面样式 start */
.type-list{
    width: 100%;
    padding: 3vw;
    box-sizing: border-box;
}
.type-item{
    margin-bottom: 3vw;
}
.type-item .title-box{
    font-size: 3.8vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-bottom: 3vw;
}
.type-item .title-box .iconfont{
    font-size: 3.8vw;
    line-height: 3.8vw;
}
.type-item .title-box .title{
    border-left: 4px solid #0f83ff;
    padding-left:1.6vw;
}
.type-item .title-box .more{
    color:#0f83ff;
}
/* home 页面样式 end */

.film-list{
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
}
.list-film{
    display: flex;
    flex-flow: row wrap;
    overflow-x: auto;
    justify-content: space-between;
}
.list-film .list-item{
    margin-right: 0vw;
}
.list-film .list-item:last-child:nth-child(3n+2){
    margin-right: 32vw;
}

/* film-item start */
.film-item{
    width: 30vw;
    flex-shrink: 0;
    margin-right: 3vw;
}
.film-item img{
    width: 100%;
    height: 42vw;
    object-fit: cover;
}
.film-item .name{
    font-size: 3.8vw;
    width: 100%;
    white-space: nowrap;
    text-overflow:ellipsis; 
    overflow: hidden;
    padding: 2px 0px;   
}
.film-item .stars .iconfont{
    font-size: 3.6vw;
    padding-right: 2px;
    color: #ccc;
    line-height: 3.8vw;
}
.film-item .stars .iconfont.active{
    color: goldenrod;
}
.film-item .stars .source{
    font-size: 3.6vw;
    line-height: 3.8vw;
    padding-left: 1vw;
}
/* film-item end */

